import dash
from dash import html
import feffery_antd_components as fac
import feffery_antd_charts as fact
from dash.dependencies import Input, Output, State, ALL

app = dash.Dash(__name__)

init_line_data = {
    '系列1': [
        {
            'x': str(i),
            'y': 10000 + 5000 * i,
            'series': '系列1'
        }
        for i in range(0, 50)
    ],
    '系列2': [
        {
            'x': str(i),
            'y': 10000 + i ** 2,
            'series': '系列2'
        }
        for i in range(0, 50)
    ],
    '系列3': [
        {
            'x': str(i),
            'y': 10000 + i ** 3,
            'series': '系列3'
        }
        for i in range(0, 50)
    ]
}

app.layout = html.Div(
    [
        html.Div(
            fac.AntdCheckCardGroup(
                fac.AntdRow(
                    [
                        fac.AntdCol(
                            fac.AntdCheckCard(
                                fac.AntdTitle(f'系列{i}'),
                                value=f'系列{i}',
                                style={
                                    'width': '100%'
                                }
                            ),
                            span=8
                        )
                        for i in range(1, 4)
                    ]
                ),
                id='check-card-group',
                defaultValue='系列1',
                style={
                    'width': '100%'
                }
            )
        ),
        fac.AntdDivider(isDashed=True),
        html.Div(
            id='charts-container',
            style={
                'height': '400px'
            }
        ),
        html.Div(
            id='point-clicked-demo'
        )
    ],
    style={
        'padding': '50px 100px'
    }
)


@app.callback(
    Output('charts-container', 'children'),
    Input('check-card-group', 'value')
)
def check_card_to_chart(value):
    if value:
        return fact.AntdLine(
            id={
                'type': 'antd-line-demo',
                'index': value
            },
            data=init_line_data[value],
            xField='x',
            yField='y',
            seriesField='series',
            color={
                'func': '''(item) => {
                    if (item.series === '系列1') {
                        return 'red'
                    } else if (item.series === '系列2') {
                        return 'yellow'
                    }
                    return 'orange'
                }'''
            },
            # color=[
            #     '#5B8FF9',
            #     '#5AD8A6',
            #     '#5D7092'
            # ],
            annotations=[
                {
                    'type': 'region',
                    'start': ['0%', '0%'],
                    'end': ['20%', '7.5%'],
                    'top': True,
                    'style': {
                        'fill': '#1890ff',
                        'fillOpacity': 1,
                        'opacity': 0.6,
                    },
                },
                {
                    'type': 'text',
                    'position': ['10%', '3.5%'],
                    'content': 'AntdLine示例',
                    'style': {
                        'fill': '#fff',
                        'fontSize': 18,
                        'textAlign': 'center',
                        'textBaseline': 'middle'
                    },
                }
            ],
            point={
                'style': {
                    'func': '(item) => { return { r: Number(item.x) % 4 ? 0 : 5 }; }'
                }
            }
        )

    return dash.no_update


@app.callback(
    Output('point-clicked-demo', 'children'),
    Input({
        'type': 'antd-line-demo',
        'index': ALL
    }, 'recentlyPointClickRecord')
)
def line_chart_listen_click(recentlyPointClickRecord):
    if any(recentlyPointClickRecord):
        return '{} 被点击'.format(dash.callback_context.triggered[0]['prop_id'])


if __name__ == '__main__':
    app.run_server(debug=True)
